<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>股票自动交易系统</title>
		<link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
		<style>
			.el-header, .el-footer {
			background-color: #B3C0D1;
			/* color: #333; */
			text-align: center;
		  }
		  
		  .el-main {
			/* background-color: #E9EEF3; */
			/* color: #333; */
			text-align: center;
		  }
		  
		  body > .el-container {
			margin-bottom: 40px;
		  }
		  
		  #title {
			  font-size: 30px;
		  }
		</style>
	</head>
	<body>
		<div id="app">
			<el-container>
				<el-header>Header</el-header>
				<el-main>
					<div id="todayTransaction">
						<el-divider content-position="left"><b>今日交易情况</b></el-divider>
						<el-table :data="tableData.slice((currentPage-1)*pageSize,currentPage*pageSize)" stripe>
							<el-table-column type="index">
							</el-table-column>
							<el-table-column prop="strategy" label="策略">
							</el-table-column>
							<el-table-column prop="tscode" label="股票代码">
							</el-table-column>
							<el-table-column prop="stock" label="股票名称">
							</el-table-column>
							<el-table-column prop="op" label="操作">
							</el-table-column>
							<el-table-column prop="num" label="手数">
							</el-table-column>
							<el-table-column prop="price" label="价格(元/手)">
							</el-table-column>
						</el-table>
						<el-pagination align='center' 
						   @size-change="handleSizeChange" 
						   @current-change="handleCurrentChange"
						   :current-page="currentPage" 
						   :page-sizes="[1,5,10,20]" 
						   :page-size="pageSize" 
						   layout="total, sizes, prev, pager, next, jumper" 
						   :total="tableData.length">
						</el-pagination>
					</div>
				</el-main>
				<el-footer>
					Copyright © 2021 - now | by python量化投资小组. All Rights Reserved.
				</el-footer>
			</el-container>
		</div>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
		<script type="text/javascript">
			let vue = new Vue({
				el: '#app',
				data: {
					tableData: [{
						strategy: 'ah溢价',
						time: '2021-05-29',
						tscode: '600860.SH8',
						stock:'平安银行',
						op:'买入',
						num:20,
						price:1.25
					}, {
						strategy: 'ah溢价',
						time: '2021-05-29',
						tscode: '600860.SH7',
						stock:'平安银行',
						op:'买入',
						num:20,
						price:1.25
					}, {
						strategy: 'ah溢价',
						time: '2021-05-29',
						tscode: '600860.SH9',
						stock:'平安银行',
						op:'买入',
						num:20,
						price:1.25
					}, {
						strategy: '历史新高',
						time: '2021-05-29',
						tscode: '600860.SH6',
						stock:'平安银行',
						op:'买入',
						num:20,
						price:1.25
					}],
					currentPage:1,
					pageSize:2,
				},
				methods: {
					handleCurrentChange(val){
						this.currentPage = val;
					},
					//一页几行发生改变的时候触发：
					handleSizeChange(val){
						this.currentPage = 1;//回到首页
						this.pageSize = val;
					}
				},
				created() {

				}
			});
		</script>
	</body>
</html>
